import { useEffect, useState } from 'react';
import { Splitter, Button, Breadcrumb } from 'antd';
import { Layout } from 'antd';
import Aichat from '../../component/aiChat/aichat';
import styles from './mainView.module.css';
import Sidebar from '../../component/layout/sidebar';
// import DataVisualization from '../dataVisualization/dataVisualization';
import { Link, Outlet, useNavigate } from 'react-router-dom';
const { Header, Footer, Sider, Content } = Layout;
const userName = 'Liqiuyu';
const MainView = (props) => {
    const [sizes, setSizes] = useState(['75%', '25%']);
    const switchCloseOpen = () => {
        if (sizes[0] !== '100%') {
            setSizes(['100%', '0%']);
        } else if (sizes[1] === '0%'){
            setSizes(['75%', '25%']);
        }
    }

    const navigate = useNavigate();

    const [routePath, setRoutePath] = useState('/home')
    const [routeName, setRouteName] = useState("")
    useEffect(() => {
        console.log('routePath 发生变化:', routePath);
        if (routePath && routePath !== '/home') {
            navigate(routePath);
        } else if (routePath === '/home' ) {
            navigate('/home/dataVisualization');
        }
    },[routePath,navigate]);

    const getRoutePath = (pathObj) => {
        setRoutePath(pathObj.path)
        setRouteName(pathObj.name)
    }
    return (
        <div className={styles.splitterContainer}>
            <Splitter
                className={styles.animatedSplitter}
                onResize={setSizes}
                style={{boxShadow: '10px 10px 10px rgba(0, 0, 0, 0.1)'}}
            >
                <Splitter.Panel size={sizes[0]} className={styles.panelLeft}>
                    {/* 左侧面板 (main views)*/}
                    <div style={{width: '100%', height: '100vh'}}>
                        <Layout className={styles.layout}>
                            <Header className={styles.header}>
                                <div className={styles.logoArea}>
                                    <img src={'/logo512.png'} className={styles.logo} alt="logo" />
                                </div>
                                <HeaderContent routeName={routeName} routePath={routePath}/>
                                <Button
                                    onClick={() => switchCloseOpen()}
                                    className={styles.aiSwitchButton}
                                    title={'点击开关ai对话,也可按住拖动对话窗口左边框,对话窗口自动匹配宽度'}
                                >
                                    {sizes[0] === '100%' ? '◁' : '▷'}
                                </Button>
                            </Header>
                            <Layout>
                                <Sider className={styles.sider}>
                                    <Sidebar sendRoutePath={getRoutePath}/>
                                </Sider>
                                <Content className={`${styles.content} pt5`}>
                                    {/*页面入口*/}
                                    <Outlet />
                                </Content>
                            </Layout>
                            <Footer className={styles.footer}>
                                by Raven Voss, Mail: 18048748106@163.com
                            </Footer>
                        </Layout>
                    </div>
                </Splitter.Panel>
                <Splitter.Panel size={sizes[1]} className={styles.panelRight}>
                    {/* 右侧面板 (ai chat)*/}
                    <Aichat />
                </Splitter.Panel>
            </Splitter>
        </div>
    )
}

const HeaderContent = ({routeName, routePath}) => {
    return (
        <div className={styles.headerContent}>
            <img src={'https://youke1.picui.cn/s1/2025/09/03/68b8063b09079.png'} className={styles.userImg} alt="UserImg" />
            <div className={styles.userName}>name:</div>{userName}
            <div className={styles.divider} />
            <Button className={styles.topButton}>个人信息</Button>
            <Button className={styles.topButton}>退出登录</Button>
            <Button className={styles.topButton}>帮助</Button>
            <div className={styles.divider} />
            <Breadcrumb
                items={[
                    {title: <Link to='/home/dataVisualization'>Home</Link>},
                    {title: <Link to={routePath}>{routeName}</Link>}
                ]}
                className={styles.breadcrumb}
            />
        </div>
    )
}

export default MainView;